<template>
  <el-dialog title="添加人员" :visible.sync="visible" center>
    <el-container>
      <el-main>
        <el-form :label-position="labelPosition" :rules="rules" ref="addPersonForm" label-width="70px" :model="addPersonForm">
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="姓名" prop="record_name">
                <el-input v-model="addPersonForm.record_name" clearable placeholder="该输入项为必填项"/>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="工号" prop="record_no">
                <el-input v-model="addPersonForm.record_no" clearable placeholder="该输入项为必填项"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="身份证号" prop="record_sfzhm">
                <el-input v-model="addPersonForm.record_sfzhm" clearable placeholder="该输入项为必填项"/>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="单位" prop="record_dwname">
                <el-input v-model="addPersonForm.record_dwname" @click.native="sendAddVisible" placeholder="该输入项为必填项"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="联系电话" prop="record_lxdh">
                <el-input v-model="addPersonForm.record_lxdh" clearable placeholder="该输入项为必填项"/>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="状态" prop="record_state">
                <el-select v-model="addPersonForm.record_state" style="width: 100%">
                  <el-option v-for="item in personState" :key="item.id" :label="item.label" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="职务" prop="record_zw">
                <el-select v-model="addPersonForm.record_zw" clearable style="width: 100%">
                  <el-option v-for="item in duties" :key="item.id" :value="item.id" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="性别" prop="record_xb">
                <el-select v-model="addPersonForm.record_xb" clearable style="width: 100%">
                  <el-option v-for="item in sex" :key="item.id" :value="item.id" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="入职日期" prop="record_rzrq">
                <el-date-picker
                  style="width: 100%"
                  v-model="addPersonForm.record_rzrq"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item label="出生日期" prop="record_csrq">
                <el-date-picker
                  style="width: 100%"
                  v-model="addPersonForm.record_csrq"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer style="text-align: center">
        <el-button type="primary" :loading="addBtn"  @click="submitForm('addPersonForm')">提交</el-button>
        <el-button @click="resetForm('addPersonForm')">重置</el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

<script>
  import { selDictonary } from '../../../api/dictionary'
  import { addPersonnel } from '../../../api/personnelFile'

  export default {
    name: 'person-child-add',
    props: ['dialogAddVisible', 'dwName2'],
    data() {
      var reg = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      var checkIdCard = (rule, value, callback) => {
        if (!reg.test(value)) {
          callback(new Error('请输入十八位身份证号码'))
        } else {
          callback()
        }
      }
      return {
        addBtn: false,
        visible: false,
        record_img: '',
        labelPosition: 'left',
        addPersonForm: {
          record_sfzhm: '',
          record_no: '',
          record_dw: '',
          record_dwname: '',
          record_name: '',
          record_lxdh: '',
          record_state: '',
          record_zw: '',
          record_xb: '',
          record_rzrq: '',
          record_csrq: ''
        },
        rules: {
          record_sfzhm: [
            { required: true, message: '请输入身份证号码', trigger: 'blur' },
            { validator: checkIdCard, trigger: 'blur' }
          ],
          record_no: [
            { required: true, message: '请输入工号', trigger: 'blur' }
          ],
          record_dwname: [
            { required: true, message: '请输入单位名称', trigger: 'change' }
          ],
          record_lxdh: [
            { required: true, message: '请输入联系电话', trigger: 'blur' }
          ],
          record_name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ]
        },
        duties: [],
        sex: [],
        personState: []
      }
    },
    mounted: function() {
      selDictonary().then(content => {
        for (var i = 0; i < content.length; i++) {
          if (content[i].id === 'zw') {
            this.duties = content[i].comboboxDetailList
          } else if (content[i].id === 'xb') {
            this.sex = content[i].comboboxDetailList
          } else if (content[i].id === 'recordstate') {
            this.personState = content[i].comboboxDetailList
          } else {
            continue
          }
        }
      })
    },
    watch: {
      dialogAddVisible: function(val) {
        this.visible = val
      },
      visible: function(val) {
        this.$emit('update:dialogAddVisible', val)
      },
      dwName2: function(val) {
        this.addPersonForm.record_dwname = val.orgname
        this.addPersonForm.record_dw = val.orgno
      }
    },
    methods: {
      submitForm: function(addPersonForm) {
        this.$refs[addPersonForm].validate((valid) => {
          if (valid) {
            this.addBtn = true
            addPersonnel(this.addPersonForm).then(res => {
              this.addBtn = false
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.visible = false
              this.$emit('update:dwName2', '')
              this.$refs[addPersonForm].resetFields()
            })
          } else {
            return false
          }
        })
      },
      resetForm(addPersonForm) {
        this.$emit('update:dwName2', '')
        this.$refs[addPersonForm].resetFields()
      },
      sendAddVisible: function() {
        this.$emit('addDwName', true)
      }
    }
  }
</script>

<style scoped>
</style>
